import 'package:dmz/base/pageWidget/base_stateful_widget.dart';
import 'package:dmz/base/widget/defult_text_field.dart';
import 'package:dmz/base/widget/defult_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class VerificationCodeInput extends StatefulWidget {
  final Function(String phone) finished;

  const VerificationCodeInput({super.key, required this.finished});
  @override
  _VerificationCodeInputState createState() => _VerificationCodeInputState();
}

class _VerificationCodeInputState extends State<VerificationCodeInput> {
  final List<TextEditingController> _controllers =
      List.generate(11, (_) => TextEditingController());
  final List<FocusNode> _focusNodes = List.generate(11, (_) => FocusNode());

  @override
  void dispose() {
    for (var controller in _controllers) {
      controller.dispose();
    }
    for (var node in _focusNodes) {
      node.dispose();
    }
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
  }

  cleanAllInput() {
    _controllers.forEach((element) {
      element.text = '';
    });
    FocusScope.of(context).requestFocus(_focusNodes[0]);
  }

  @override
  Widget build(BuildContext context) {
    // DefultTextField(fontSize)
    return Column(children: [
      Row(children: [
        DefaultText('请输入对方用于注册账号的手机号'.tr, 32.sp, textColor: Color(0xB3FFFFFF)),
        Expanded(child: SizedBox()),
        Image.asset('assets/images/home/share/clean_icon.png',
                width: 48.sp, height: 48.sp)
            .addGestureDetector(() => cleanAllInput())
      ]).marginOnly(bottom: 34.sp, left: 32.sp, right: 32.sp, top: 34.sp),
      Container(
          child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(
                  11,
                  (index) => Container(
                      alignment: Alignment.center,
                      color: Color(0xFF434650),
                      width: 50.sp,
                      height: 165.sp,
                      child: DefultTextField(
                          controlle: _controllers[index],
                          focusNode: _focusNodes[index],
                          40.sp,
                          maxLength: 2,
                          keyboardType: TextInputType.number,
                          textAlign: TextAlign.center,
                          fontWeight: FontWeight.w700,
                          hitColor: Colors.transparent,
                          textColor: Colors.white, onChanged: (value) {
                        debugPrint('手机输入1 --- $value');
                        if (value.isNotEmpty) {
                          // 移动到下一个输入框
                          String? other;
                          if (value.length > 1) {
                            _controllers[index].text = value[0];
                            other = value[1];
                          }
                          _moveToNextField(index, other: other);
                        } else {
                          _backToNextField(index);
                        }
                      })).marginOnly(right: 10.sp)))),
      Expanded(child: SizedBox()),
      DefaultBtn(
              click: () => finished(), title: '确认'.tr, textColor: Colors.white)
          .marginOnly(bottom: 112.sp)
    ]);
  }

  void finished() {
    String result = '';
    _controllers.forEach((element) {
      result = result + element.text;
    });
    widget.finished(result);
  }

  void _moveToNextField(int index, {String? other}) {
    if (index < _controllers.length - 1) {
      FocusScope.of(context).requestFocus(_focusNodes[index + 1]);
      _controllers[index + 1].text = other ?? '';
    }
  }

  void _backToNextField(int index) {
    if (index < _controllers.length && index != 0) {
      FocusScope.of(context).requestFocus(_focusNodes[index - 1]);
    }
  }
}
